<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 引入本地资源 -->
		<!-- 引入vue.js -->
		<script src="js/vue.js"></script>
		<!-- 引入elementui的js资源 -->
		<script src="js/element/index.js"></script>
		<!-- 引入elementui的css样式 -->
		<link rel="stylesheet" href="css/index.css" />
		<!-- 引入网络请求库axios -->
		<script src="js/axios.min.js"></script>
		<!-- 引入qs，处理参数问题，将参数序列化 -->
		<script src="js/qs.min.js"></script>
		
		<!-- 引入cdn上的地址 -->
		<!-- 引入样式 -->
		<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> -->
		<!-- 引入组件库 -->
		<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
		
		<style>
		#app{
			margin-top: 260px;
		}
		</style>
	</head>
	<body style="background-color: #00FFFF;">
		<div id="app">
			<el-form :model="UserInfoBean" status-icon ref="UserInfoBean" label-width="100px" class="demo-ruleForm">
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item  label="" prop="username">
							<el-input prefix-icon="el-icon-user-solid" type="text" v-model="UserInfoBean.username" placeholder="请输入用户名"
								autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item label="" prop="userpwd">
							<el-input prefix-icon="el-icon-s-goods" type="password" v-model="UserInfoBean.userpwd" placeholder="请输入密码"
								autocomplete="off">
							</el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row>
					<el-col :span="12" :offset="6">
						<el-form-item>
							<el-button type="primary" @click="login()">登录</el-button>
							<el-button @click="resetForm('UserInfoBean')">重置</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			
			
		</div>
	</body>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				UserInfoBean: {
					username: "",
					userpwd: ""
				}
			},
			methods: {
				login: function() {
					console.log("点击登录")
					console.log(this.UserInfoBean)
					var params=Qs.stringify(this.UserInfoBean)
					console.log(params)
					axios.post("http://localhost:8086/ngd_springboot20221014/userlogin",params).
					then(function(response){
						console.log(response)
						if(response.data=="ok"){
							console.log("响应成功，返回响应数据ok")
							window.location.href="welcome.html"
						}else{
							window.location.href="index.html"
						}
						
						}).
					catch(function(err){  
						
					})
				},
				resetForm(formName) {
					this.$refs[formName].resetFields();
				}
			}



		})
	</script>
</html>
